<template>
    <h2>房型列表</h2>
    房型名称<input type="text" v-model="prist.name">
    房型大小<input type="text" v-model="prist.squre">-<input type="text" v-model="prist.equres">
    <input type="button" value="查询" @click="getlist">
    <table>
        <tr>
            <td>房型名称</td>
            <td>房型图片</td>
            <td>创建时间</td>
            <td>房型大小</td>
            <td>入住人数</td>
            <td>房型描述</td>
        </tr>
        <tr v-for="item in list">
            <td>{{item.rname}}</td>
            <td><img :src="'https://localhost:7214'+item.picture" width="60" height="60"></td>
            <td>{{item.createtime.substr(0,10)}}</td>
            <td>{{item.squre}}</td>
            <td>{{item.peopnum}}</td>
            <td>{{item.remark}}</td>
        </tr>
    </table>
    共<span style="color: red;">{{ count }}</span>条，每页<span style="color: red;">{{ prist.page }}</span>条，当前<span style="color: red;">{{ prist.index }}</span>/<span style="color: red;">{{ pcount }}</span>页

    <input type="button" value="首页" @click="setpage('a')">
    <input type="button" value="上一页" @click="setpage('b')">
    <input type="button" value="下一页" @click="setpage('c')">
    <input type="button" value="尾页" @click="setpage('d')">
  </template>
  
  <script setup lang="ts">
  import {onMounted, reactive, toRefs} from 'vue'
  import {useRouter,useRoute} from 'vue-router'
  import axios from 'axios'
  const router=useRouter()
  const route=useRoute()

  let data:any=reactive({
    list:[],
    prist:{
        name:'',
        squre:'',
        equres:'',
        index:1,
        page:2
    },
    count:0,
    pcount:0
  })
  let {list,prist,count,pcount} =toRefs(data)

  onMounted(()=>{
    getlist()
  })

  const getlist=()=>{
    let obj={
        name:prist.value.name,
        squre:prist.value.squre,
        equres:prist.value.equres,
        index:prist.value.index,
        page:prist.value.page
    }
    axios({
        url:'/api/Room/Gettype',
        method:'get',
        params:obj
    })
    .then(res=>{
        list.value=res.data.data;
        count=res.data.coco;
        pcount=res.data.promax;
    })
  }

  const setpage=(val:any)=>{
    switch(val){
        case "a":
            prist.value.index=1;
            ;break;
        case "b":
            prist.value.index--;
            ;break;
        case "c":
            prist.value.index++;
            ;break;
        case "d":
            prist.value.index=pcount;
            ;break;
    }
    getlist()
  }
  </script>
  
  <style scoped>
  
  </style>